<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-08 16:07:07
 * @LastEditTime : 2022-10-09 16:07:36
 * @FilePath     : \vue3.2.31-case\响应式基础\响应式工具函数\toRef\ref和toRef的区别.vue
-->
<script setup lang="ts">
import { ref, toRef } from 'vue'

let obj = {count: 3}
const state1 = ref(obj.count)
const state2 = toRef(obj, 'count')

const add1 = () => {
  //对于ref的数据，原始值未改变，响应式数据对象的值改变了，响应式数据对象值改变后会同步更新视图，即ref是对原数据的拷贝，不会影响到原始值
  state1.value ++
  console.log('原始值：', obj); //{count: 3}
  console.log('响应式数据对象：', state1.value);  //4
}

const add2 = () => {
  //对于toRef后的数据，原始值和响应式数据对象的值都改变了，响应式数据对象值改变后不会同步更新视图，即ref是对元数据的引用，会影响到原始值
  state2.value ++
  console.log('原始值：', obj); //{count: 4}
  console.log('响应式数据对象：', state2.value);  //4
}
</script>

<template>
  <h3>toRef</h3>
  <h5>
    作用：单个转换。将引用数据类型中某个属性转换为ref数据类型，将reavtive数据类型中某个属性转换转换为ref数据类型
  </h5>
  <h5>
    参数：<br>
    1、第一个参数：引用数据或reactive类型的数据的源对象
    2、第二个参数：源对象中的属性名
  </h5>
  <h5>
    使用场景：<br>
    1、有一个引用类型数据或响应式对象数据，但是模板中只需要使用其中一项数据；
  </h5>
  <h5>
    toRef和ref的区别：<br>
    1、ref 是对传入数据的拷贝，ref 的值改变会更新视图；toRef 是对传入数据的引用，toRef 的值改变不会更新视图
  </h5>
  <h5>
    注意：<br>
    1、引用数据，是址传递，源数据发生改变，toRef后的也会发生改变 <br>
    2、toRef后的数据在事件触发中发生改变，数据会变化，但界面不会自动更新 <br>
    3、toRef后的数据没在事件触发中发生改变，数据会变化，界面会自动更新 <br>
  </h5>
  <ul>
    <li>
      <p>{{ state1 }}</p>
	    <p>{{ state2 }}</p>
    </li>
  </ul>
  <button @click="add1">增加1</button>
  <button @click="add2">增加2</button>
</template>

<style scoped>
ul,li{
  list-style: none;
}
</style>
